<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // ES5 的 Object.defineProperty = 该操作对对象进行数据完整劫持是时必须做递归操作的
        let _tempData = {
            msg: "测试数据"
        }
        let defineData = {}
        // 指定变量的栈中的值,defineProperty的劫持操作只对被劫持的数据负责
        Object.defineProperty(defineData, "tempData", {
            get() {
                console.log("get")
                return _tempData
            },
            set(nv) {
                console.log("set")
                _tempData = nv;
            }
        })

        // console.log( defineData.tempData.msg ); // get
        // defineData.tempData.msg = 1111; // get
        // defineData.tempData.test = 2222; // get

        let _arr = [1, 2, 3, 4, 5, 6];
        let obj = {};
        Object.defineProperty(obj, "arr", {
            get() {
                console.log("get")
                return _arr
            },
            set(nv) {
                console.log("set")
                _arr = nv;
            }
        })
        // console.log("==", obj.arr)  // get
        // console.log("==", obj.arr[0]) // get
        // obj.arr[0] = 1111 // get
        // obj.arr.length = 2; // get

        // ES6 的 Proxy 对象 = Proxy 是为整个被劫持的对象负责
        let data = {
            msg: "测试数据msg",
            info: "测试数据info"
        }
        let newData = new Proxy(data, {
            get(target, popkey, receiver) {
                console.log(data == target)
                console.log(newData == receiver)
                console.log("data被取值", target, popkey, receiver)
                return target[popkey]
            },
            set(target, popkey, nv, receiver) {
                console.log("data被赋值")
                target[popkey] = nv;
            }
        })
        // console.log( newData.msg ); // get
        // newData.msg = "12331123";  // set
        // newData.test = 111111; // set


        let arr2 = [1,2,3,4,5];
        let newArr2 = new Proxy(arr2,{
            get(target, popkey, receiver) {
                console.log("data被取值", popkey)
                return target[popkey]
            },
            set(target, popkey, nv, receiver) {
                console.log("data被赋值",popkey)
                target[popkey] = nv;
                return popkey;
            }
        })
        // console.log("===",newArr2[0] ) //get
        // newArr2[0] = 2222 // set
        // newArr2.length = 2; // set
        console.log("===", newArr2.push(1111) )
    </script>
</head>

<body>

</body>

</html>